<template>
  <el-container class="container">
    <el-aside width="12%">
      <el-menu style="height: 100%; text-align: left;" :default-active="activePath"
               class="el-menu-vertical-demo" @open="handleOpen" :collapse-transition='false' router
               @close="handleClose"  active-text-color="#FFFFFF"
               unique-opened>
        <div class="title">
          <img class="logo_png" src="../assets/img/guagua_logo.png">
          <h5 class="h4">瓜瓜后台管理</h5>
        </div>
        <!-- 一级菜单 -->
        <el-submenu :index="item.menuId+''" v-for="item in menus" :key="item.menuId">
          <!-- 一级菜单模板区域 -->
          <template slot="title">
            <!-- 图片 -->
            <i class="el-icon-s-tools"></i>
            <!-- 文本 -->
            <span>{{item.menuName}}</span>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.menuId" @click="saveNavState('/'+subItem.path)">
            <!-- 二级菜单模板区域 -->
            <template slot="title">
              <!-- 图片 -->
              <i class="el-icon-menu"></i>
              <!-- 文本 -->
              <span>{{subItem.menuName}}</span>

            </template>
            <!-- 二级菜单 -->
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="height: 8%; background: #D05C5C;">
        <div style="display: flex; justify-content: space-between;background-color: #D05C5C;">
          <div>
          </div>
          <div><el-button size="small">退出</el-button></div>
        </div>
      </el-header>
      <el-main style="background-color: #F0F2F5;height: 100%">
        <div style="font-size: 14px;margin-bottom: 15px">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }"><strong>首页</strong></el-breadcrumb-item>
            <el-breadcrumb-item><a href="/user"><strong>用户管理</strong></a></el-breadcrumb-item>
            <el-breadcrumb-item><strong>活动列表</strong></el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div>
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import {testGet, testPost, getSql} from 'api/test';
  import menuJson from '@/assets/json/test.json';
  import {getMenuData} from '@/api/menu';
  import {test} from 'api/login';

  export default {
    data() {
      return {
        menus: [],
        //被激活的链接地址
        activePath:''
      }
    },
    created() {
      this.getMenuList();
      test().then(res => {
        console.log("111111111111+test", res)
        this.msg = res.data;
      })
      testGet().then(res => {
        console.log("111111111111+testGet", res)
      })
      testPost('2').then(res => {
        console.log("111111111111+testPost", res)
      })
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      getMenuList() {
        getMenuData().then(res => {
          this.menus = res.data;
        })
      },
      saveNavState(activePath) {
        this.activePath = activePath;
      }

    }
  }
</script>

<style scoped>
  .container {
    height: 100%;
  }

  .logo_png {
    width: 40px;
    height: 40px;
    margin-left: 5px;
    margin-right: 3px;
  }

  .title {
    display: flex;
    height: 8%;
    background-color: #D05C5C;
    box-shadow: -10px 0 12px #8c939d;
  }

  .h4 {
    font-size: 15px;
    color: #ffffff;
    margin: 20px 10px 20px 10px
  }

  .el-header{
    padding: 0;
  }
  /deep/.el-submenu__title i {
    /*color: #000000 !important;*/
  }
  .el-icon-menu{
    /*color: #000000 !important;*/
  }

  .el-menu-item.is-active {
    background-color: #D05C5C !important;
  }
</style>